.alert {
  border: 1px solid;
  border-radius: 3px;
  margin: 30px 0;
  padding: 20px;

  @include alert-style($color-primary-100, $color-primary-300, $color-primary-900, $color-primary-700, $color-primary-400);

  &.alert--has-icon {
    position: relative;
    padding-left: 80px;
  }

  &.alert--with-shadow {
    box-shadow: 0 2px 6px 0 rgba($black, 0.16);
  }
}

.alert__icon {
  position: absolute;
  left: 20px;
  top: 20px;
  background-color: #fff;
  border: 4px solid;
  width: 40px;
  height: 40px;
  line-height: 32px;
  text-align: center;
  border-radius: 100%;
}

.alert__icon-loading {
  margin: 9px auto 0 auto;
}

.alert__title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}

.alert__content {
  margin: 0;
}

.alert__close {
  @include absolute(10px, 10px, auto, auto);
}

.alert--success {
  @include alert-style($color-success-100, $color-success-300, $color-success-900, $color-success-700, $color-success-400);
}

.alert--warning {
  @include alert-style($color-warning-100, $color-warning-300, $color-warning-900, $color-warning-700, $color-warning-400);
}

.alert--error {
  @include alert-style($color-error-100, $color-error-300, $color-error-900, $color-error-700, $color-error-400);
}
